<template>
    <div id="wrap">
        <h1>文本插值&原始 HTML</h1>
        <p>{{ str }}</p>
        <p>{{ rawHtml }}</p>
        <p v-text="rawHtml"></p>
        <hr>
        <p>Using text interpolation:{{ rawHtml + '后缀字符串' }}</p>
        <p>Using text interpolation:{{ rawHtml + '后缀字符串' }}</p>
        <p>Using text interpolation:{{ isTrue ? rawHtml : `${rawHtml}后缀字符串` }}</p>
        <p>Using text interpolation:{{ isTrue ? arr.join(',') : `${rawHtml}后缀字符串` }}</p>
        <p>{{ arr.join(',') }}</p>
        <hr>
        <p v-text="'Using text interpolation:' + rawHtml + '后缀字符串'"></p>
        <p v-text="`Using text interpolation:' + ${rawHtml} + '后缀字符串`"></p>
        <p v-html="isTrue ? rawHtml : `${rawHtml}后缀字符串`"></p>
        <p v-html="arr.join(',')"></p>
        <!-- ?事件绑定-响应式数据绑定 -->
        <p>Current Count:{{ count }}</p>
        <p>Current doubleCount:{{ doubleCount }}</p>
        <p>{{ cr }}</p>
        <button type="button" v-on:click="counterStore.increment">增加</button>
        <button type="button" @click="cr++">增加cr</button>
        <!-- ?组合使用 -->
        <ul>
        <li v-for="(item,index) in arr" :key="index">{{ item }}</li>
        </ul>
    </div>
</template>
<script lang="ts">
export default {
    name:'st'
}
</script>

<script lang="ts" setup>
import { ref } from "vue";
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'Pinia'
const str=ref('hello world')
const rawHtml='<span style="color:blue">我是html标签span</span>'
const isTrue=false
let arr = ['小明','小红','小绿']
const counterStore = useCounterStore() 
const { count, doubleCount } = storeToRefs(counterStore)
const cr = ref(0) //声明的变量
</script>

<style lang="scss">
@use '@/assets/common.scss'
</style>